import Vue from 'vue';
import LoadingModel from "@/components-sys/loading-directive/loading.model";
import {LoadingTypeEnum} from "@/components-sys/loading-directive/loading-type.enum";

export default class LoadingDirective {
	/**
	 * 自定义指令（loading）{type?:string,message?:string,size:0.7}
	 */
	public static Directive() {
		return Vue.directive('base-loading', {
			// 初始化插入
			bind: function (el, binding) {
				const {value} = binding;
				if (value) {
					let html = LoadingDirective.createLoadingDom('loading-directive', value)
					el.insertAdjacentHTML('beforeend', html);
				}
			},
			// 数据更新
			update: function (el, binding) {
				const {value, oldValue} = binding;
				if (value === oldValue) return;
				// 如果有值变化并且没有添加过dom，则向后添加loading节点
				if (!el.lastElementChild || value && !el.lastElementChild.className.includes('loading-directive')) {
					let html = LoadingDirective.createLoadingDom('loading-directive', value)
					el.insertAdjacentHTML('beforeend', html);
				}
				// 否则为关闭
				if (oldValue && !value) {
					try {
						el.lastChild.remove();
					} catch (e) {
						el.lastChild['removeNode'](true);
					}
				}
			}
		});
	};

	/**
	 * 创建loading
	 */
	private static createLoadingDom(className: string, value?: boolean | LoadingModel) {
		let style = '', message = '';
		if (typeof value !== "boolean" && value?.size) {
			style = `transform: scale(${value.size});
					-moz-transform: scale(${value.size});
					-webkit-transform: scale(${value.size});
					-ms-transform: scale(${value.size});`
		}
		if (typeof value !== "boolean" && value?.message) {
			message = value.message;
		}
		// 竖线样式dom
		if (typeof value !== "boolean" && value?.type === LoadingTypeEnum.line) {
			return `<div class="loading-container ${className}">
						<div class="loading-line">
							<div class="scale-row" style="${style}">
								<div class="line-row">
									<div class="line-1"></div>
									<div class="line-2"></div>
									<div class="line-3"></div>
									<div class="line-4"></div>
									<div class="line-5"></div>
								</div>
								<p class="text">${message}</p>
							</div>
						</div>
					</div>`;
		}
		// 雪花样式dom
		return `<div class="loading-container ${className}">
					<div class="loading-spine" >
						<div class="scale-row" style="${style}">
							<div class="spine-row">
								<div class="spine-1"><i class="left"></i><i class="right"></i></div>
								<div class="spine-2"><i class="left"></i><i class="right"></i></div>
								<div class="spine-3"><i class="left"></i><i class="right"></i></div>
								<div class="spine-4"><i class="left"></i><i class="right"></i></div>
							</div>
							<p class="text">${message}</p>
						</div>
					</div>
				</div>`;
	};

	/**
	 * 函数调用loading
	 */
	public static loading(option?: LoadingModel) {
		const body = document.getElementsByTagName('body')[0];
		let html = LoadingDirective.createLoadingDom('loading-fix', option)
		body.insertAdjacentHTML('beforeend', html);
		let oldLoading = body.getElementsByClassName('loading-fix');
		// 如果有dom节点则返回关闭的方法
		if (oldLoading.length) {
			return {
				close: () => {
					for (let i = 0; i < oldLoading.length; i++) {
						body.removeChild(oldLoading[i])
					}
				}
			}
		}
	}
}
